<template>
	<qh-page-view title="商品详情">
		<block v-if="goods">
			<view class="flex-column-100">
				<scroll-view scroll-y class="scroll-view">
					<swiper indicator-dots="true" indicator-active-color="var(--primary-color)" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-if="video_url !=''">
							<video :src="video_url" id="myVideo" muted show-mute-btn autoplay="true" loop='false' style="width: 100%;height: 100%;"
								@ended="showBanner"></video>
						</swiper-item>
						<block v-for="(item, index) in imgUrls" :key="index" v-if="imgUrls.length">
							<swiper-item>
								<image :src="item" @tap="seeBig" :data-index="index" class="slide-image" mode="aspectFit">
								</image>
							</swiper-item>
						</block>
					</swiper>

					<view class="countDown">
						<view class="countDownL">
							<image src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1729071152670f8830e398a.png"></image>
							<text>限时秒杀，超值低价</text>
							<view class="seckill-box">{{active_title}}</view>
						</view>
						<view class="countDownR">
							<block v-if="act_status==1">
								<view>距离活动开始还剩:</view>
								<view class="countDownR_T">
									<view v-if="countdown0>0">{{countdown0}}</view>
									<text v-if="countdown0>0">天</text>
									<view>{{countdown1}}</view>:<view>{{countdown2}}</view>:<view>{{countdown3}}</view>
								</view>
							</block>
							<block v-else-if="act_status==2">
								<view>距离活动结束还剩:</view>
								<view class="countDownR_T">
									<view v-if="countdown0>0">{{countdown0}}</view>
									<text v-if="countdown0>0">天</text>
									<view>{{countdown1}}</view>:<view>{{countdown2}}</view>:<view>{{countdown3}}</view>
								</view>
							</block>
							<block v-else>
								<view>活动已结束:</view>
								<view class="countDownR_T">
									<view>--</view>:<view>--</view>:<view>--</view>
								</view>
							</block>
						</view>
					</view>

					<view class="info">
						<view class="info-left">
							<view class="info-left-a">￥<text>{{goods_price}}</text>
							</view>
							<view class="info-left-b">
								<view class="info-left-b1">￥{{online_price}}</view>
							</view>
						</view>
						<view v-if="showShareBtn" class="details-share" @tap="showShare">
							<text class="qh-rt-single qh-rt-fenxiang1-copy share-icon"></text>
							<text class="text-share">分享</text>
						</view>
					</view>
					<view class="name">
						<text class="productName">{{goods_name}}</text>
						<block v-if="sku">
							<text class="xh">{{sku}}</text>
						</block>
					</view>
					<!-- 配送方式 -->
					<view v-if="delivery_name" class="Specifications bg box-sizing" @tap="clickDeliveryRule">
						<text class="list-title" style="width: 68rpx;">配送</text>
						<view>
							<view class="fee-flex" :style="delivery_status == 1? 'margin-bottom : 20rpx' : ''">
								<text class="SpecificationsText delivery-title">配送方式</text>
								<text class="SpecificationsText">{{delivery_name}}</text>
								<block v-if="delivery_rule">
									<text v-if="delivery_rule.type==1" class="SpecificationsText">免运费</text>
									<block v-else>
										<text class="SpecificationsText before-line">快递费 ￥</text>
										<text v-if="delivery_rule.type==2||delivery_rule.type==3"
											class="SpecificationsText">{{delivery_rule.list[0].first_fee}}起</text>
										<text v-if="delivery_rule.type==4" class="SpecificationsText">{{delivery_rule.list[0].unified_fee}}起</text>
									</block>
									<view class="Specifications-img">
										<image mode="aspectFit" src="/static/images/arrow-1.png"></image>
									</view>
								</block>
							</view>
							<view v-if="delivery_status == 1">
								<text class="SpecificationsText delivery-title">配送费</text>
								<text class="SpecificationsText">单笔消费满{{delivery_cost}}元免运费</text>
							</view>
						</view>
					</view>

					<!-- 评价 -->
					<view class="CommentStyle bg" @tap="toComment">
						<view class="Comment-nav">
							<text class="Comment-nav-words">商品评价 ({{total}})</text>
							<view class="Specifications-img">
								<image mode="aspectFit" src="/static/images/arrow-1.png"></image>
							</view>
						</view>
						<view class="content">
							<view class="Comment-detail" v-if="total>0">
								<view class="userInfo">
									<image :src="commentInfo[0].avatar" mode="aspectFit" class="userImage"></image>
									<text class="nickName">{{commentInfo[0].nickname}}</text>
								</view>
								<view class="Comment-con">
									<text class="Comment-con-words">{{commentInfo[0].content}}</text>
									<view class="Comment-con-img">
										<image v-for="(item, i) in commentInfo[0].evaluate_img" :key="i" :src="item" mode="aspectFit" @tap.stop="scaleBig"
											:data-index="i"></image>
									</view>
								</view>
							</view>
							<view class="content-title" v-else>
								<text class="Comment-content">该商品暂无评价~</text>
							</view>
						</view>
					</view>
					<!-- 商品详情-->
					<view class="commodity-details" v-if="display_detail==1">
						<view class="commodity-details-title">商品详情</view>
						<view class="commodity-details-com">
							<jyf-parser :html="article_details"></jyf-parser>
						</view>
					</view>
					<!--底部留白  -->
					<view class="seize-a-seat"></view>
				</scroll-view>
			</view>

			<!-- 底部 -->
			<view class="buycar" :style="footerStyle">
				<block v-if="act_status==2">
					<view class="togetherbuy" @tap="purchase" v-if="(userInfo.platform_type == 2 && userInfo.vid) || (userInfo.platform_type == 1)">
						<view class>立即抢购</view>
					</view>
					<!-- <view class="togetherbuy"> -->
					<login-and-register v-if="!userInfo.vid && userInfo.platform_type == 2" @success="registerSuccess">
						<view class="togetherbuy">立即抢购</view>
					</login-and-register>
					<!-- </view> -->
				</block>
				<block v-else>
					<view class="sport">
						<view class>活动未开始</view>
					</view>
				</block>
			</view>

			<!-- 购买弹出层 -->
			<view class="alert-mask" @tap="closeAlert" v-if="alertAppear">
				<view class="alert-com" @tap.stop="!alertAppear" :style="alertStyle">
					<view class="alert-product">
						<view class="productImg">
							<image mode="aspectFit" :src="goods_image"></image>
						</view>
						<view class="alert-product-info">
							<view class="productName">{{goods_name}}</view>
							<view>
								<text class="productPrice">￥{{goods_price}}</text>
							</view>
							<text class="stock">库存:{{goods_stock}}</text>
						</view>
					</view>
					<!-- 商品规格 -->
					<view class="alert-body">
						<view class="alert-shopNum">
							<view class="alertLimit">
								<view>数量</view>
								<view v-if="limit !=null && limit != 0" class="limit">（限购 {{limit}} 件）</view>
							</view>
							<view class="alert-payNum-box">
								<view v-if="goodsDetails.rise_num!=0" class="limit limit-start">
									{{goodsDetails.rise_num}}件起购
								</view>
								<view class="alert-payNum">
									<view class="alertBtn" data-num="0" @tap.stop="payshopNum">
										<image src="/static/images/num-less-1.png"></image>
									</view>
									<view class="alertBtn alertNum">{{alertNum}}</view>
									<view class="alertBtn alert-plus" data-num="1" @tap.stop="payshopNum">
										<image src="/static/images/num-add-1.png"></image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="goods_stock < item.alertNum || goods_stock == 0">
							<view class="nextbtn" @tap.stop="nextbtn2">下一步</view>
						</view>
						<view v-else>
							<view class="nextbtn" @tap.stop="nextbtn">下一步</view>
						</view>
					</view>
					<text class="qh-rt-single qh-rt-a-ziyuan1 alert-close-icon" @tap.stop="closeAlert"></text>
				</view>
			</view>

			<!-- 配送规则 -->
			<view class="choose-sku-container delivery-rule-zindex" v-if="showDeliveryRule">
				<view class="choose-sku-model" @tap="clickDeliveryRule" @longtap="clickDeliveryRule" @touchmove="clickDeliveryRule"></view>
				<view class="choose-sku-box sku-box-position">
					<text class="qh-rt-single qh-rt-a-ziyuan1 alert-close-icon" @tap.stop="clickDeliveryRule"></text>
					<view class="model-title">运费计价说明</view>
					<view class="delivery-content">
						<view>
							<text>当前商品仅支持以下地区快递发货，如有疑问请联系商家</text>
						</view>
						<view v-for="(item, c) in delivery_rule.list" :key="c">
							<text>{{item.area_name}}，</text>
							<text v-if="delivery_rule.type==1">免运费</text>
							<text v-if="delivery_rule.type==2">首{{item.first_num*1}}件{{item.first_fee}}元，每续{{item.append_num*1}}件{{item.append_fee}}元。</text>
							<text
								v-else-if="delivery_rule.type==3">首{{item.first_num*1}}kg{{item.first_fee}}元，每续{{item.append_num*1}}kg{{item.append_fee}}元。</text>
							<text v-else-if="delivery_rule.type==4">统一运费{{item.unified_fee}}元。</text>
						</view>
						<view v-if="delivery_status == 1">单笔消费满{{delivery_cost}}元免运费</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 分享模板 -->
		<share v-if='isShowShare' @close='closeShowShare' :share='share'></share>
	</qh-page-view>
</template>

<script>
	var app = getApp().globalData;
	import share from '@/components/share.vue'
	export default {
		components: {
			share
		},
		data() {
			return {
				imgUrls: [],
				video_url: "",
				sku: '',
				autoplay: false,
				interval: 5000,
				duration: 1000,
				countdown1: '',
				countdown2: '',
				countdown3: '',
				endDate2: '',
				goodsname: '',
				// 商品详情图
				shopDetails: [],
				alertAppear: false,
				//  弹层
				alertNum: 1, // 限购量
				colorIndex: 0,
				//色值下标
				codeImg: "",
				share: {
					maskShare: false,
					//分享弹窗
					maskHidden: false, //海报图片,
					type: 0,
					data: ''

				},
				showDeliveryRule: false,
				//是否显示运费计算规则
				total: 0 //g
					,
				countdown0: "",
				id: "",
				goods_name: "",
				goods_price: "",
				online_price: "",
				goods_stock: "",
				limit: "",
				goods_image: "",
				active_title: "",
				goods_id: '',
				goods: 0,
				goodsDetails: "",
				delivery_set: "",
				delivery_rule: "",
				delivery_name: "",
				act_status: 0,
				display_detail: 0,
				commentInfo: "",
				article_details: "",
				isShowShare: false,
				isShowShareData: {
					guide_id: null,
					goods: "",
					goods_img: '',
					goods_id: '0'
				},
				delivery_status: 0,
				delivery_cost: '',
				store_id: "",
				isShowDialog: false,
				shoppingId: '',
				isGetPhone: false, // 是否获取了手机号
				register_phone: '', // 注册手机号
				userInfo: {}, // 用户信息
				showShareBtn: true,

				browse_duration: 0, //浏览时长
				browseTimer: null, //浏览计时器
			};
		},
		computed: {
			footerStyle() {
				let h = this.$store.bottomHeight + 118
				return 'height:' + h + 'rpx;padding-bottom:' + this.$store.bottomHeight + 'rpx';
			},
			alertStyle() {
				return 'padding-bottom:' + this.$store.bottomHeight + 'rpx';
			},
		},
		onShow() {
			if (this.browse_duration > 0) {
				this.browseTimer = setInterval(() => {
					this.browse_duration++;
				}, 1000)
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			console.log('页面参数：', options)
			await this.$onLaunched;
			
			// #ifdef MP-ALIPAY
			this.showShareBtn = app.XcxData.appid == app.XcxData.tempAppId ? false : true;
			// #endif

			// #ifdef MP-WEIXIN
			if (!options.id) {
				options = getApp().globalData.getOnLaunchParam(options);
			}
			// #endif
			if (options && (options.store_id || options.s)) {
				this.store_id = options.store_id || options.s;
				this.$store.store_id = options.store_id || options.s;
			}
			this.id = options.id;
			this.userInfo = {
				...app.XcxData.userInfo
			};
			this.detail();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {
			clearInterval(this.browseTimer);
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
			clearInterval(this.browseTimer);
			app.addVisitGoodsRecord({
				goods_id: this.goodsDetails.gid,
				browse_duration: this.browse_duration,
			})
		},
		// 用户分享
		onShareAppMessage(res) {
			var id = this.id;
			return {
				title: this.goods_name,
				path: '/pages/index/Seckill-purchase-details/Seckill-purchase-details?id=' + id + '&store_id=' +
					this.$store.store_id + '&share_uid=' + getApp().globalData.XcxData.userInfo.uid,
			};
		},
		methods: {
			//会员注册成功
			registerSuccess() {
				this.userInfo = {
					...app.XcxData.userInfo
				};
				this.purchase();
			},
			//轮播视频加载完触发事件
			showBanner() {
				this.autoplay = true;
			},
			//显示运费规则
			clickDeliveryRule: function() {
				if (this.delivery_rule) {
					this.setData({
						showDeliveryRule: !this.showDeliveryRule
					});
				}
			},
			// 关闭分享
			closeShowShare: function() {
				this.isShowShare = false
				this.share.maskShare = false
			},
			//点击分享
			showShare: function(e) {
				if (this.act_status == 1) {
					var text = "距开始：";
					var status = 1;
				} else if (this.act_status == 2) {
					var text = "距结束：";
					var status = 1;
				} else {
					var text = "活动已结束";
					var status = 2;
				}
				this.isShowShareData.groupData = {
					text: text,
					status: status,
					time: [this.countdown0, this.countdown1, this.countdown2, this.countdown3],
				}
				this.setData({
					share: {
						maskShare: true,
						maskHidden: false,
						data: this.isShowShareData,
						type: 3,
					},
					isShowShare: true,
				});
			},
			//查看大图
			seeBig: function(e) {
				var index = parseInt(e.currentTarget.dataset.index);
				uni.previewImage({
					current: this.imgUrls[index],
					urls: this.imgUrls // 需要预览的图片http链接列表

				});
			},

			//倒计时
			countTime() {
				var that = this; // var date = new Date(that.data.nowtime);

				var date = new Date();
				var now = date.getTime();
				var end = that.endDate2;
				let end2 = end.replace(/-/g, '/');
				var endDate = new Date(end2); //设置截止时间

				var endTime = endDate.getTime();
				var leftTime = endTime - now; //时间差

				var d, h, m, s, ms;

				if (leftTime >= 0) {
					d = Math.floor(leftTime / 1000 / 60 / 60 / 24); //天

					h = Math.floor(leftTime / 1000 / 60 / 60 % 24); //时

					m = Math.floor(leftTime / 1000 / 60 % 60); //分

					s = Math.floor(leftTime / 1000 % 60); //秒

					ms = Math.floor(leftTime % 1000); //毫秒

					ms = ms < 100 ? "0" + ms : ms;
					s = s < 10 ? "0" + s : s;
					m = m < 10 ? "0" + m : m;
					h = h < 10 ? "0" + h : h;
					that.setData({
						countdown0: d,
						countdown1: h,
						countdown2: m,
						countdown3: s
					}); //递归每秒调用countTime方法，显示动态时间效果

					setTimeout(that.countTime, 100);
				} else {
					console.log('已截止');
				}
			},

			// 秒杀购买
			purchase() {
				this.alertAppear = true; //  弹层
			},

			//下一步
			nextbtn() {
				uni.navigateTo({
					url: "../Seckill_paymentOrder/Seckill_paymentOrder?&spike_id=" + this.id + '&buy_number=' + this.alertNum
				});
			},

			// 库存不足
			nextbtn2() {
				uni.showToast({
					title: "库存不足",
					icon: 'none'
				});
			},

			// 数量
			payshopNum(e) {
				var goods_stock = this.goods_stock; //库存

				var implement = e.currentTarget.dataset.num; //加 && 减

				var alertNum = this.alertNum; //购物数量

				var limit = this.limit; //限购数量

				if (implement == 0) {
					//减操作
					if (alertNum <= 1) {
						return;
					}

					if (this.goodsDetails.rise_num != 0 && parseFloat(this.goodsDetails.rise_num) >= alertNum) {
						//起购数量限制
						return;
					}

					alertNum--;
					this.setData({
						alertNum: alertNum
					});
				} else {
					//加操作
					if (limit) {
						if (alertNum == limit) {
							return;
						}
					} else {
						if (alertNum == goods_stock) {
							return;
						}
					}

					alertNum++; // console.log(limit)

					this.setData({
						alertNum: alertNum
					});
				}
			},

			// 关闭弹出
			closeAlert() {
				this.setData({
					alertAppear: false
				});
			},

			//商品详情
			detail: function() {
				uni.showLoading({
					title: '加载中',
					// #ifndef MP-ALIPAY
					mask: true,
					// #endif
				});
				var that = this;
				var id = that.id;
				getApp().globalData.sendRequest({
					url: '/Spike/getSpikeDetails',
					type: 'post',
					data: {
						spike_id: that.id
					},
					success: (res) => {
						uni.hideLoading();

						if (res.status == 1) {
							if (!this.$store.store_id) {
								this.$store.store_id = res.spike_data.store_id;
							}
							that.setData({
								imgUrls: res.banner,
								// 轮播图
								video_url: res.video_url,
								//轮播视频
								goods_name: res.spike_data.goods_name,
								// 商品名
								goods_price: res.spike_data.spike_price,
								// 秒杀价
								online_price: res.spike_data.online_price,
								// 原价
								goods_stock: res.spike_data.stock,
								// 库存
								limit: res.spike_data.limit_state == 1 && res.spike_data.limit_num ?
									res.spike_data.limit_num : 1,
								// 限购量
								goods_image: res.spike_data.goods_image,
								// 图片
								active_title: res.spike_data.name,
								// 活动标题
								sku: res.spike_data.sku_name ? res.spike_data.sku_name : '',
								goods: 1,
								goodsDetails: res.spike_data,
								delivery_set: res.delivery_set,
								delivery_rule: res.delivery_rule ? res.delivery_rule : null,
								alertNum: res.spike_data.rise_num == 0 ? 1 : res.spike_data.rise_num,
								isShowShareData: {
									guide_id: null,
									goods: res.spike_data,
									goods_img: res.spike_data.goods_image ? res.spike_data.goods_image : '',
									goods_id: that.id,
								},
								delivery_status: res.delivery_status,
								delivery_cost: res.delivery_cost
							});

							if (res.delivery_set) {
								var delivery_name = [];

								for (var i = 0; i < res.delivery_set.length; i++) {
									if (res.delivery_set[i].data == 1) {
										delivery_name.push(res.delivery_set[i].name);
									}
								}

								that.setData({
									delivery_name: delivery_name.join(' & ')
								});
							} //时间
							if (that.video_url) {
								that.autoplay = false
							} else {
								that.autoplay = true
							}

							var time = res.time;
							var starttime = res.spike_data.start_time;
							var endtime = res.spike_data.end_time;

							if (starttime > time) {
								that.setData({
									act_status: 1,
									endDate2: res.spike_data.startTime
								});
							} else if (starttime <= time && endtime >= time) {
								that.setData({
									act_status: 2,
									endDate2: res.spike_data.endTime
								});
							} else {
								that.setData({
									act_status: 3,
									endDate2: res.data.startTime
								});
							}

							if (res.spike_data.details) {
								//WxParse.wxParse('details', 'html', res.spike_data.details, that, 5)
								setTimeout(() => {
									that.article_details = res.spike_data.details;
								}, 200);
								that.setData({
									display_detail: 1 // 图文详情

								});
							}
							this.browseTimer = setInterval(() => {
								this.browse_duration++;
							}, 1000)
							that.countTime();
							that.getcommentList();
						}
					}

				});
			},
			//查看评价大图
			scaleBig: function(e) {
				var that = this;
				var index = parseInt(e.currentTarget.dataset.index);
				uni.previewImage({
					current: that.commentInfo[0].evaluate_img[index],
					urls: this.commentInfo[0].evaluate_img // 需要预览的图片http链接列表

				});
			},
			//获取商品评价
			async getcommentList() {
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/OrderEvaluate/getGoodsEvaluate', {
					goods_id: this.goodsDetails.gid
				})
				if (status == 1) {
					this.commentInfo = data.list;
					this.total = data.total;
				}
			},
			// 跳转到评价列表页
			toComment() {
				uni.navigateTo({
					url: '/pages/order/commentList/comment?goods_id=' + this.goodsDetails.gid
				});
			},

		}
	};
</script>
<style>
	@import "./Seckill-purchase-details.css";
</style>
